<template>
    <section class="city-box">
        <app-header></app-header>

        <cityBanner></cityBanner>

        <div class="content">
            <div class="container clearfix">
                <!--楼层导航-->
                <a-anchor class="anchor-box" :offsetTop="80" style="margin: 30px 0 0 0;">
                    <a-anchor-link :class="{'ant-anchor-link-active': cityAnchorLink}" href="#city-introduce" title="城市介绍" />
                    <a-anchor-link href="#basic-info" title="基本信息" />
                    <a-anchor-link href="#city-climate" title="城市气候" />
                    <a-anchor-link href="#housePrice-trend" title="房价趋势" />
                    <a-anchor-link href="#hot-housing" title="热门房源" />
                    <a-anchor-link href="#related-news" title="相关新闻" />
                    <a-anchor-link href="#more-hot-city" title="更多城市" />
                    <a-anchor-link href="#consultant-team" title="金牌顾问" />
                </a-anchor>

                <!-- 城市介绍 -->
                <cityIntroduce></cityIntroduce>

                <!-- 基本信息 -->
                <cityInformation></cityInformation>

                <!-- 城市气候 -->
                <cityWeather></cityWeather>

                <!-- 房价趋势 -->
                <housePriceTrend></housePriceTrend>

                <!--热门房源-->
                <hotHouse></hotHouse>

                <!--相关新闻-->
                <relatedNews></relatedNews>

                <!--更多热门城市-->
                <moreHotCity></moreHotCity>

                <!--金牌顾问-->
                <consultantTeam></consultantTeam>
            </div>
        </div>

        <!--返回顶部-->
        <BackTop :isShowHouseContrast="false"></BackTop>
    </section>
</template>
<script>
    import Header from '../../components/header.vue';//公共组件——头部
    import cityBanner from './cityBanner.vue';//城市图片banner轮播
    import cityIntroduce from './cityIntroduce.vue';//城市介绍
    import cityInformation from './cityInformation.vue';//基本信息
    import cityWeather from './cityWeather.vue';//城市气候
    import housePriceTrend from './housePriceTrend.vue';//房价趋势
    import hotHouse from './hotHouse.vue';//热门房源
    import relatedNews from './relatedNews.vue';//相关新闻
    import moreHotCity from './moreHotCity.vue';//更多热门城市
    import consultantTeam from '../../components/consultantTeam.vue';//公共组件——中美置业团队
    import BackTop from '../../components/BackTop.vue';//公共组件——返回顶部

    export default {
        data() {
            return {
                cityid: this.$route.query.cityid, //城市Id
                cityAnchorLink: true,//默认给楼层导航第一个链接active类名

                metaInfo_title: '',//vue-meta动态管理头部标签-title
                metaInfo_keywords: '',//vue-meta动态管理头部标签-keywords
                metaInfo_description: '',//vue-meta动态管理头部标签-description

            }
        },
        metaInfo () {
            return {
                title: this.metaInfo_title,
                meta: [
                    { vmid: 'keywords', name: 'keywords', content: this.metaInfo_keywords },
                    { vmid: 'description', name: 'description', content: this.metaInfo_description },
                ],
            }
        },
        beforeRouteUpdate(to, from, next){
            next();
            // console.log(to, from, next)

            //判断是否是从城市详情页跳转进来，并且过滤判断hash值，即#后边的值（防止点击楼层导航触发beforeRouteUpdate，而造成发送下面两个接口）
            if(to.path == '/City' && to.hash == ''){
                this.cityid = to.query.cityid;
                //更新城市详情数据
                this.getCityDetails();
                //更新城市指数数据
                this.getCityIndexData();
            }
        },
        computed: {},
        created() {
        },
        mounted() {
            //获取城市详情数据
            this.getCityDetails();
            //获取城市指数数据
            this.getCityIndexData();

            window.addEventListener('scroll', this.isScrollTop, false);
        },
        destroyed: function() {
            window.removeEventListener('scroll', this.isScrollTop, false);//离开的时候注销事件
        },
        methods: {
            //获取城市详情数据
            getCityDetails(){
                this.$get('/city/detail/'+ this.cityid).then(res => {
                    if (res.status == 0) {
                        //设置城市详情页使用——城市详情数据
                        this.$store.commit('set_cityDetails', res.data);
                        this.metaInfo_title = res.data.seoTitle;
                        this.metaInfo_keywords = res.data.seoKeyword;
                        this.metaInfo_description = res.data.seoDescription;
                    }else{
                        console.log(res.msg);
                    }
                });
            },
            //获取城市指数数据
            getCityIndexData(){
                this.$get('/city/index/'+ this.cityid).then(res => {
                    if (res.status == 0) {
                        //设置城市详情页使用——城市指数数据
                        this.$store.commit('set_cityIndexData', res.data);
                    }else{
                        console.log(res.msg);
                    }
                });
            },
            //判断页面滚动条是否超过了楼层导航第二个链接
            isScrollTop(){
                if(document.documentElement.scrollTop > 1540){
                    this.cityAnchorLink = false;
                }else{
                    this.cityAnchorLink = true;
                }
            }
        },
        components: {
            'app-header': Header,//公共组件——头部
            cityBanner,//头部城市图片banner轮播
            cityIntroduce,//城市介绍
            cityInformation,//基本信息
            cityWeather,//城市气候
            housePriceTrend,//房价趋势
            hotHouse,//热门房源
            relatedNews,//相关新闻
            moreHotCity,//更多热门城市
            consultantTeam,//公共组件——中美置业团队
            BackTop,//公共组件——返回顶部
        }
    }
</script>

<style lang="less" type="text/less">
    body{
        .city-box{
            background: #fff;
            .container{
                /*自定义楼层导航样式*/
                .anchor-box {
                    >.ant-affix {
                        width: 100% !important;
                        top: 60px !important;
                        left: 0px !important;
                    }
                    .ant-anchor-wrapper{
                        font-size: 16px;
                        padding: 0 100px;
                        background: #909ba5;
                        >.ant-anchor{
                            width: 100%;
                            display: -webkit-flex; /* Safari ,Webkit内核的浏览器，必须加上-webkit前缀。*/
                            display: flex;
                            text-align: center;
                            height: 56px;
                            line-height: 56px;
                            font-size: 16px;
                            padding: 0;
                            >.ant-anchor-ink:first-of-type{
                                display: none;
                            }
                            >.ant-anchor-link{
                                flex: 1;
                                float: left;
                                width: 12.5%;
                                padding:0px;
                                line-height: 56px;
                                >a{
                                    display: block;
                                    width: 100%;
                                    color: #fff;
                                }
                                >a:hover{
                                    color: #fff;
                                }
                            }
                            >.ant-anchor-link-active{
                                background: #0c7cd5;
                                >a{
                                    color: #fff;
                                }
                            }
                        }
                    }
                }

                /*每个大盒子的公共头部和内容样式*/
                article {
                    padding: 20px 0;
                    >.public-header-content {
                        > .header {
                            font-size: 20px;
                            color: #000;
                            padding: 15px 0;
                            border-bottom: 1px solid #e5e5e7;
                            text-align: left;
                            margin: 0 0 15px 0;
                            display: block;
                            > i {
                                float: left;
                                width: 5px;
                                height: 26px;
                                background: #00b6ef;
                                margin: 0 10px 0 0;
                            }
                        }
                        > .content {
                            width: 100%;
                            > aside {
                                > p {
                                    font-size: 15px;
                                    color: #000;
                                    line-height: 30px;
                                    margin: 20px 0;
                                    text-align: left;
                                    text-indent: 2em;
                                }
                            }
                            > div {
                                margin: 20px 0;
                                > .inside {
                                    border: 1px solid #dee2e5;
                                    padding: 0;
                                    > header {
                                        width: 100%;
                                        padding: 13px 20px;
                                        background: #dbf1ff;
                                        font-size: 17px;
                                        color: #3e403f;
                                        border-bottom: 1px solid #dee2e5;
                                        text-align: left;
                                    }
                                    > .content {
                                        width: 100%;
                                        height: 300px;
                                        text-align: center;
                                        position: relative;
                                        display: flex;
                                        flex-direction: column;
                                        justify-content: center;
                                        padding: 0 15px;
                                        > img {
                                            max-width: 220px;
                                            margin: 0 auto;
                                        }
                                        > h3 {
                                            font-size: 36px;
                                            color: #000;
                                            margin: 10px 0;
                                            > span {
                                                font-size: 16px;
                                            }
                                        }
                                        > h4 {
                                            font-size: 20px;
                                            color: #000;
                                            margin: 10px 0;
                                            > span {
                                                font-size: 16px;
                                            }
                                        }
                                        > p {
                                            font-size: 15px;
                                            color: #000;
                                            margin: 10px 0;
                                        }
                                        > h5 {
                                            font-size: 20px;
                                            color: #000;
                                            position: absolute;
                                            top: 50%;
                                            left: 50%;
                                            transform: translate(-50%, -50%);
                                            -webkit-transform: translate(-50%, -50%);
                                            -moz-transform: translate(-50%, -50%);
                                            -ms-transform: translate(-50%, -50%);
                                        }
                                    }
                                    > p {
                                        padding: 0 10px;
                                        margin: 0 0 15px 0;
                                        font-size: 14px;
                                        color: #23bff0;
                                    }
                                }
                            }
                            .echart-chart {
                                padding: 0;
                                > .inside {
                                    border: 1px solid #dee2e5;
                                    padding: 0;
                                    > header {
                                        padding: 13px 20px;
                                        background: #dbf1ff;
                                        font-size: 17px;
                                        color: #3e403f;
                                        border-bottom: 1px solid #dee2e5;
                                    }
                                    > .chartBox {
                                        width: 100%;
                                        min-height: 300px;
                                        text-align: center;
                                        position: relative;
                                        >.el-radio-group{
                                            padding: 15px 0;
                                            >.el-radio+.el-radio{
                                                margin-left: 15px;
                                            }
                                        }
                                        >.regionType-button{
                                            >div {
                                                padding: 10px;
                                                float: right;
                                            }
                                        }
                                        >.chart-div {
                                            width: 100%;
                                            height: 250px;
                                        }
                                        > p {
                                            font-size: 14px;
                                            color: #ff7b2c;
                                            text-align: center;
                                            margin: 5px 0;
                                        }
                                        >h4 {
                                            min-height: 300px;
                                            display: flex;
                                            justify-content: center;
                                            align-items: center;
                                            font-size: 20px;
                                            color: #000;
                                            text-align: center;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>